<template>
  <div>
    <!-- banner swiper -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in this.banner" :key="index">
        <a :href="item.url"><img :src="item.pic" @click="toUrl" /></a>
      </van-swipe-item>
    </van-swipe>

    <!-- icon 歌曲分类 -->
    <ul class="iconContainer">
      <li v-for="(item, index) of this.icondata" :key="index" @click="toSongs(item.id)">
        <div class="imgbg"><img :src="item.iconUrl" /></div>
        <!-- ../assets/musiclogo.png -->
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <!-- 底部导航 -->
    <TabBar></TabBar>
  </div>
</template>
<script>
import TabBar from './comm/Tabbar.vue'
export default {
  data() {
    return {
      active: 0,
      datas: [],
      banner: [],
      url: [],
      icondata: [],
    }
  },
  mounted() {
    this.http.get('/banner?type=1').then((res) => {
      if (res.data.code == 200) {
        this.datas = res.data
        this.banner = this.datas.banners
      }
    })
    this.http.get('/homepage/dragon/ball').then((res) => {
      if (res.data.code !== 200) {
        this.$toast('获取数据失败！')
        return false
      }
      this.icondata = res.data.data
    })
  },
  methods: {
    toSongs(url) {
      switch (url) {
        case -1:
          this.$router.push('/Recommend')
          break
      }
    },
    toUrl() {
      this.banner.forEach((v, i) => {
        this.url = v.url
      })
    },
  },
  components: {
    TabBar,
  },
}
</script>
<style scoped>
.main /deep/ .foot {
  bottom: 50px;
}
.iconContainer {
  width: 100%;
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding: 0 10px;
  box-sizing: border-box;
  color: var(--font-color);
  margin-top: 10px;
}
.imgbg {
  background-color: #77777773;
  border-radius: 50%;
  margin-bottom: 5px;
}
.iconContainer li {
  margin-right: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.iconContainer li img {
  width: 54px;
  height: 54px;
}
.iconContainer::-webkit-scrollbar {
  display: none;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 140px;
  text-align: center;
  border-radius: 10px;
  padding: 10px 10px 0;
  box-sizing: border-box;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 10px;
}
</style>
